<style lang="less" scoped>

.product-slider-bar {
    .up-btn,
    .down-btn {
        &,
        &:hover,
        &:focus,
        &:active {
            box-shadow: none;
            outline: none;
            background-color: #fff;
            color: #37CA73;
            outline: #37CA73;
            padding-top: 0;
            padding-bottom: 0;
            border: 0;
            i{
                font-size: 30px;
            }
        }
    }

    ul{
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: flex;
      flex-flow: column;
      li{
        width: 100%;
      }
    }
}

</style>

<template>

<div v-if="products.length > 0" id="productSliderBar" class="product-slider-bar">
    <button type="button" class="btn btn-block up-btn" @click="changeProduct('prev')"><i class="fa fa-angle-up"></i></button>
      <ul>
        <li v-for="product in products" :id="product.id" class="row margin-reset item" v-bind:style="{order: showIds.indexOf(product.id) != -1 ? showIds.indexOf(product.id) : -1 }" v-show="showIds.indexOf(product.id) != -1" >
            <a :href="'/products/' + product.id">
                <img :src="mainImgUrl(product)" alt="">
                <div class="cut-title" v-text="product.title"></div>
            </a>
            <div class="text-red" v-text="'￥' + product.msrp"></div>
        </li>
      </ul>
    <button type="button" class="btn btn-block down-btn" @click="changeProduct('next')"><i class="fa fa-angle-down"></i></button>
</div>

</template>

<script>

import Query from '../query'
import SuccessDialog from 'success_alert'
import ErrorDialog from 'error_alert'

export default {
    name: "productSliderBar",
    props: {
        productId: {
            required: true,
            type: Number
        }
    },
    data: function data() {
        return {
            limit: 2,
            // 默认图片
            baseImgUrl: 'http://oqhwiuu27.bkt.clouddn.com/default_product.png',
            products: [],
            showIds: [],
        }
    },
    created: function created() {
        this.initData()
    },
    mounted: function mounted() {},
    computed: {
        allIds: {
            get: function() {
                if (this.products) {
                    return this.products.map((item) => {
                        return item.id
                    })
                }
            }
        }
    },
    methods: {
        // 获取关联商品
        initData: function() {
            var _this = this
            Query.get('/products/' + _this.productId + '/get_related_products').then((data) => {
                if (data.flag === true) {
                    _this.products = data.data
                    let showArr = _this.products.filter((item, index) => {
                        return index < _this.limit
                    })
                    _this.showIds = showArr.map((item) => {
                      return item.id
                    })
                }
            }).catch((error) => {
                ErrorDialog.show(error.msg)
            })
        },

        // 切换关联商品
        changeProduct: function(mode) {
          var _this = this
          var keyId

          if (mode === 'prev') {
            keyId = _this.showIds[0]

            let currentIndex = _this.allIds.indexOf(keyId)
            let preIndex = currentIndex === 0 ? _this.allIds.length - 1 : currentIndex - 1

            _this.showIds.pop()
            _this.showIds.unshift(_this.allIds[preIndex])

          } else if (mode === 'next') {
            keyId = _this.showIds[_this.showIds.length - 1]
            let currentIndex = _this.allIds.indexOf(keyId)
            let nextIndex = currentIndex === _this.allIds.length - 1 ? 0 : currentIndex + 1

            _this.showIds.shift()
            _this.showIds.push(_this.allIds[nextIndex])
          }
        },

        // 商品默认图片
        mainImgUrl: function(product) {
            if (product.main_img_url) {
                return product.main_img_url
            } else {
                return this.baseImgUrl
            }
        }
    }
}

</script>
